<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery treetable Tests</title>
    <link rel="stylesheet" href="./jquery.treetable.css" />
  </head>
  <body>
    <table id="treeTable1" style="table-layout: fixed">
                    
                </table>
  </body>
      <script src="./jquery.js"></script>
    <script src="./jquery.treetable.js"></script>
  <script>
    $(function(){
var data={
    list:[ 
        {
            id:"1",
            pId:"",
            content1: "法师",
            content2: "aaa",
            content3: "bbb"
        },
        {
            id:"2",
            pId:"1",
            content1: "法师",
            content2: "aaa",
            content3: "bbb"
        },
        {
            id:"3",
            pId:"2",
            content1: "法师",
            content2: "aaa",
            content3: "bbb"
        },
        {
            id:"4",
            pId:"3",
            content1: "法师",
            content2: "aaa",
            content3: "bbb"
        },
        {
            id:"5",
            pId:"3",
            content1: "法师",
            content2: "aaa",
            content3: "bbb"
        },
        {
            id:"6",
            pId:"",
            haschild: true,
            content1: "法师",
            content2: "aaa",
            content3: "bbb"
        },
        {
            id:"10",
            pId:"",
            content1: "法qwrweq师",
            content2: "aaa",
            content3: "bbb"
        }
    ],
    title:[
        {
            name:'1',
            field:'content1'
        },{
            name:'2',
            field:'content2'
        },{
            name:'3',
            field:'content3'
        }
    ]
}
var data2={
    list:[ 
        {
            id:"7",
            pId:"6",
            content1: "法421师",
            content2: "aaa",
            content3: "bbb"
        },
        {
            id:"8",
            pId:"6",
            content1: "法3123师",
            content2: "aa213a",
            content3: "b123bb"
        }
    ],
    title:[
        {
            name:'1',
            field:'content1'
        },{
            name:'2',
            field:'content2'
        },{
            name:'3',
            field:'content3'
        }
    ]
}

            var option = {
                expandLevel : 12,
                data: data,
                width: "200px",
                beforeExpand : function($treeTable, id) {
                    if ($('.' + id, $treeTable).length) { return; }
                    $("tr[id="+id+"]").after( "<tr id='loadind'><td><img src='./loading.gif'/></td></tr>" );
                    setTimeout( function(){
                        $treeTable.addChilds($treeTable.build( data2 ));
                        $( "#loadind" ).remove();
                    } ,3000)
                },
            };
            $('#treeTable1').treeTable(option);
        });
  </script>
</html>
